import styled from "styled-components";

export const LoadingWrapper = styled.div`
    padding: 2rem 0;
    width: 170rem;
    box-sizing: border-box;

`

export const ViewBox = styled.div`
    /* width: 100%; */
    background-color: #fff;
    border-radius: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    .view-top{
        padding: 1rem;
        padding-left: 2.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
        font-size: 1.6rem;
        font-weight: bold;
    }
    .view-main{
        margin: .5rem 2rem;
        height: 15.3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
            width: 32.6%;
            height: 100%;
            border-radius: 1rem;
            background: #FAFAFA;
            .li-top{
                padding: 2rem 2rem 1rem 2rem;
                font-size: 1.6rem;
                color: #666;
                display: flex;
                justify-content: start;
                align-items: center;
                .ri{
                    color: #68e261;
                    font-size: 2.4rem;
                    margin-right: 1rem;
                }
                .zhou{
                    color: #FB7676;
                    font-size: 2.4rem;
                    margin-right: 1rem;
                }
                .yue{
                    color: #69B3FA;
                    font-size: 2.4rem;
                    margin-right: 1rem;
                }
            }
            .li-main{
                padding: 0 10rem;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .li-box{
                    text-align: center;
                    h2{
                        font-weight: 600;
                        font-size: 2.4rem;
                        color: #333;
                        span{
                            font-size: 1.6rem;
                        }
                    }
                    div{
                        font-size: 1.6rem;
                        color: #666;
                    }
                }
            }
        }
    }
`

export const DataAnalysisBox = styled.div`
    /* width: 100%; */
    background-color: #fff;
    border-radius: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    .view-top{
        padding: 1rem;
        padding-left: 2.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
        font-size: 1.6rem;
        font-weight: bold;
        .top-right{
            width: 33rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-right: 1rem;
        }
    }
    .view-main{
        margin: .5rem 2rem;
        height: 15.3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
            width: 24%;
            height: 100%;
            border-radius: 1rem;
            background: #FAFAFA;
            .li-top{
                padding: 2rem 2rem 1rem 2rem;
                font-size: 1.6rem;
                color: #666;
                display: flex;
                justify-content: start;
                align-items: center;
                .ji{
                    width: 2rem;
                    height: 2rem;
                    line-height: 2rem;
                    text-align: center;
                    font-size: 1.3rem;
                    color: #fff;
                    border-radius: 0.2rem;
                    margin-right: 1rem;
                }
                .one{
                    background-color: #1268FF;
                }
                .two{
                    background-color: #FF3D6E;
                }
                .three{
                    background-color: #FEBB25;
                }
                .four{
                    background-color: #641DFF;
                }
            }
            .li-main{
                padding: 0 5rem;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .li-box{
                    text-align: center;
                    h2{
                        font-weight: 600;
                        font-size: 2.4rem;
                        color: #333;
                        span{
                            font-size: 1.6rem;
                        }
                    }
                    div{
                        font-size: 1.6rem;
                        color: #666;
                    }
                }
            }
        }
    }
`

export const DataDetailBox = styled.div`
    /* width: 100%; */
    background-color: #fff;
    border-radius: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    .view-top{
        padding: 1rem;
        padding-left: 2.4rem;
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
        color: #333;
        font-size: 1.6rem;
        font-weight: bold;
    }
`